<template>
  <div id="cryptos">
    <div class="flex mt-30 items-center">
      <p class=" font-18 flex-1 textColor">{{ title }}</p>
      <!-- <div class="money-bag" v-if="isMoney">
        现货钱包
        <img src="@/assets/image/exchange/icon_4.png" alt="" class="w-25 h-25" />
      </div> -->
    </div>
    <div style="box-sizing: border-box"
      class="w-full rounded mt-22 px-10 flex items-center box-border py-3 inputBackground">
      <div class="flex border-r-gray border-white items-center" @click="onShowActionSheet">
        <img :src="`symbol/${type == 1 ? iconImg1 : iconImg2}.png`" alt="logo"
          class="rounded-full mr-5 currency-icon" />
        <span class="font-16 mr-10 w-62 textColor">{{ type == 1 ? coin.toUpperCase() : coin1.toUpperCase() }}</span>
        <img src="./icon-arrow.png" alt="logo" class="w-12 h-8 icon-arrow" />
      </div>
      <div class="input-wrap flex justify-between flex-1 items-center ml-10">
        <input placeholder="" v-if="type == 1" type="number" class="h-40 pl-10 border-none inputBackground textColor"
          v-model="oneValue" @input="onInput" :disabled="disabled" />
        <input placeholder="" v-if="type == 2" type="number" class="h-40 pl-10 border-none inputBackground textColor"
          :value="value" @input="onInput" :disabled="disabled" />
      </div>
      <div v-if="showMax" class="text-blue max-title pr-20" @click="onMax">{{ $t('最大') }}</div>
    </div>
    <div class="flex justify-between font-22 mt-15 text-grey">
      <p v-for="(tip, index) in tips" :key="index">{{ tip }}</p>
    </div>
    <!-- <van-action-sheet  v-model="show" :actions="actions" @select="onSelect" /> -->
    <van-popup v-model:show="show" position="bottom" class="mainBackground" :style="{ height: '80%' }">
      <div class="px-30 py-30 exchange-pop">
        <div class="tab-list flex">
          <div class="tab-item flex-1 textColor" :class="[activeIndex == 0 ? 'active' : '']" @click="checkActive(0)">
            <div class="mt-20 font-30">{{ $t('从') }}</div>
            <div class="flex items-center justify-center mt-20">
              <img :src="`symbol/${iconImg1}.png`" alt="logo"
                class="w-30 h-30 rounded-full mr-10 currency-icon" />
              {{ coin.toUpperCase() }}
            </div>
          </div>
          <div class="tab-item flex-1 textColor" :class="[activeIndex == 1 ? 'active' : '']" @click="checkActive(1)">
            <div class="mt-20 font-30">{{ $t('至') }}</div>
            <div class="flex items-center justify-center  mt-20">
              <img :src="`symbol/${iconImg2}.png`" alt="logo"
                class="w-30 h-30 rounded-full mr-10 currency-icon" />
              {{ coin1.toUpperCase() }}
            </div>
          </div>
        </div>
        <div class="title">{{ $t('闪兑至') }}</div>
        <div>
          <van-field v-model="searchValue" @input="searchFun" class="search-input" :placeholder="$t('搜索')">
            <!-- <template slot="left-icon">
              <img src="@/assets/image/exchange/icon_5.png" alt="" class="w-40 h-40 mt-5" />
            </template> -->
          </van-field>
        </div>
        <div class="list mt-40">
          <div class="list-item flex mb-30" v-for="(item, index) in currencyList" :key="index" @click="onSelect(item)">
            <div class="flex-1 flex items-center">
              <div>
                <img :src="`symbol/${item.symbol_data}.png`" alt="logo"
                  class="w-30 h-30 rounded-full mr-10 currency-icon" />
              </div>
              <div>
                <div class="item-title textColor">{{ item.symbol_data.toUpperCase() }}</div>
              </div>
            </div>
            <div class="text-right" v-if="activeIndex == 0">
              <div class="item-title textColor">{{ item.usable }}</div>
              <div class="item-text">${{ item.usdt }}</div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { ActionSheet, Popup, Field } from "vant";
import { HOST_URL } from '@/config'
// import { mapGetters } from "vuex";
export default {
  name: "MiningExchangeInput",
  components: {
    [ActionSheet.name]: ActionSheet,
    [Popup.name]: Popup,
    [Field.name]: Field,
  },
  computed: {
    // ...mapGetters({coinList: 'home/coinList'}),
    // actions() { // 下拉列表
    //   const list = this.coinList.slice(0)
    //   list.map(item => {
    //     item.name = item.symbol.toUpperCase()
    //   })
    //   list.unshift({symbol: 'usdt', name: 'USDT'})
    //   return list
    // }
  },
  created() {
    this.currencyList = this.actions
    this.allCurrencyList = this.actions
    console.log(this.iconImg1, this.iconImg2)
  },
  props: {
    actions: {
      type: Array,
      default() {
        return []
      }
    },
    title: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: [Number, String],
      default: 0,
    },
    getval: {
      type: String,
      default: ''
    },
    coin: {
      type: String,
      default: "user",
    },
    coin1: {
      type: String,
      default: "AAPL",
    },
    showMax: {
      type: Boolean,
      default: true,
    },
    tips: {
      type: Array,
      default() {
        return [];
      },
    },
    type: {
      type: Number,
      default: 1,
    },
    value1: {
      type: [Number, String],
      default: 0,
    },
    iconImg2: {
      type: String,
      default: "",
    },
    iconImg1: {
      type: String,
      default: "",
    },
  },
  watch: {
    actions(val) {
      this.currencyList = val
      this.allCurrencyList = val
    },
    value1(val) {
      this.oneValue = val
    }
  },
  data() {
    return {
      HOST_URL,
      show: false,
      searchValue: '',
      activeIndex: 0,
      currencyList: [],
      allCurrencyList: [],
      oneValue: 0
    };
  },
  methods: {
    onInput(e) { // 响应外层v-models
      // console.log(e.target.value)
      this.$emit('input', e)
    },
    onMax() {
      this.$emit('max')
    },
    onShowActionSheet() {
      if (this.type == 1) {
        this.activeIndex = 0
      } else {
        this.activeIndex = 1
      }
      if (this.actions.length) {
        this.show = true;
      }
    },
    onSelect(e) { // 选中
      let obj = {
        item: e,
        type: this.activeIndex
      }
      this.searchValue = ''
      this.$emit('select', obj)
      this.show = false;
    },
    checkActive(val) {
      this.activeIndex = val
    },
    //搜索
    searchFun() {
      if (this.searchValue) {
        this.currencyList = this.currencyList.filter((item) => {
          return item.symbol.toUpperCase().indexOf(this.searchValue.toUpperCase()) != -1
        })
      } else {
        this.currencyList = this.allCurrencyList
      }
    }
  },
};
</script>
<style lang="scss">
@import "@/assets/init.scss";

#cryptos {

  font-size: 30px;

  .input-wrap {
    border-left: 1px solid #3E4968;
    padding-left: 30px;
  }

  .van-action-sheet__item {
    background: #0D1323;
    color: $text_color;
  }



  .money-bag {
    color: #818181;
  }


  .exchange-pop {
    .tab-list {
      background: #0D1323;

      border-radius: 140px;
      height: 180px;
      color: $text_color;

      .tab-item {
        text-align: center;
      }

      .active {
        background: #262D47;

        border-radius: 140px;
      }
    }

    .title {
      color:$text_color;
      padding: 30px 0 !important
    }

    .search-input {
      color: $text_color;
      background: #0D1323;
      border-radius: 80px;
      height: 100px !important;
      display: flex;
      align-items: center;
      padding-left: 30px !important;
    }

    .list {
      color:$text_color;

      .list-item {

        .item-title {
          font-size: 30px;
          font-weight: bold;
        }

        .item-text {
          color: $text_color1;
          font-size: 24px;
          margin-top: 5px;
        }
      }
    }
  }

  :deep(.van-field__control) {
    color: #747A8F;
  }

  .currency-icon {
    width: 60px !important;
    height: 60px !important;
  }

  .icon-arrow {
    width: 30px !important;
    height: 20px !important;
    margin-right: 10px !important;
  }

  .h-40 {
    height: 100px !important;
  }

  .w-62 {
    width: 150px !important;
  }

  .max-title {
    min-width: 100px;
    text-align: right;
  }
}
</style>
